<template>
	<view>
		<view class="form-view">

			<view class="form-row">
				<view class="label">头像</view>
				<uni-icons v-if="!form.pictureName" @click="onPictureNameClick" class="avatar" type="person"
					size="30"></uni-icons>
				<image v-else class="avatar" @click="onPictureNameClick" :src="form.pictureName"></image>
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">姓名</view>
				<input placeholder="请输入姓名" v-model="form.nurseName" placeholder-class="placeholder-class" />
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">手机号</view>
				<input type="number" maxlength="11" v-model="form.tel" placeholder="请输入手机号"
					placeholder-class="placeholder-class" />
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">选择所属医院</view>
				<view class="value">
					<picker :range="patientInfoList" range-key="hospitalAme" :value="index" @change="pickerChange">
						<view class="hospital-input-view">
							<view class="hospital-input">{{form.hospitalName}}</view>
							<!-- <input placeholder="未选择" v-model="form.hospitalName" placeholder-class="placeholder-class" /> -->
							<uni-icons type="right" color="#BABDC4" />
						</view>
					</picker>
				</view>
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">所属区域</view>
				<view class="value region-selected">
					<uni-data-picker v-slot:default="{data, error, options}" style="min-width: 100rpx;" :clearIcon="false"
						:localdata="regionTree" @change="onRegionTreeChange">
						<view v-if="error">
							<text>{{error}}</text>
							<uni-icons type="right" color="#BABDC4" />
						</view>
						<view v-else-if="data.length">
							<text>{{form.region}}</text>
							<uni-icons type="right" color="#BABDC4" />
						</view>
						<view v-else>
							<text class="placeholder-class">请选择</text>
							<uni-icons type="right" color="#BABDC4" />
						</view>
					</uni-data-picker>
				</view>
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">职称</view>
				<view class="value">
					<picker :range="positionalTitlesList" :value="index" @change="onPositionalTitlesPickerChange">
						<view class="hospital-input-view">
							<view v-if="form.positionalTitles" class="hospital-input">{{form.positionalTitles}}</view>
							<view v-else class="placeholder-class">请选择</view>
							<uni-icons type="right" color="#BABDC4" />
						</view>
					</picker>
				</view>
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">性别</view>
				<view class="value">
					<picker :range="sexList" :value="index" @change="onSexPickerChange">
						<view class="hospital-input-view">
							<view v-if="form.sex" class="hospital-input">{{form.sex}}</view>
							<view v-else class="placeholder-class">请选择</view>
							<uni-icons type="right" color="#BABDC4" />
						</view>
					</picker>
				</view>
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">行医时间</view>
				<view class="value">
					<picker mode="date" fields="month" @change="onPractiseMedicineTimePickerChange">
						<view class="hospital-input-view">
							<view v-if="form.practiseMedicineTime" class="hospital-input">{{form.practiseMedicineTime}}</view>
							<view v-else class="placeholder-class">请选择</view>
							<uni-icons type="right" color="#BABDC4" />
						</view>
					</picker>
				</view>
			</view>
			<view class="div-line-type-1" />

			<view class="form-row" style="height:auto;
				 box-sizing: border-box;
				 align-items: flex-start;
				 padding-top: 10rpx;
				 padding-bottom: 10rpx;">
				<view class="label">简介</view>
				<textarea style="height: 180rpx;" placeholder="请输入简介" placeholder-class="placeholder-class"
					v-model="form.profiles" />
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">身份证号</view>
				<input placeholder="请输入身份证号" placeholder-class="placeholder-class" v-model="form.idNum" />
			</view>
			<view class="div-line-type-1" />

			<view class="upload-id-card-view">
				<view class="title">上传身份证</view>
				<view class="card-view">
					<view class="card-item">
						<image v-if="!form.idCardFront" src="../../static/item_idcard_front.png" class="card-img"
							@click="onIdCardFrontClick">
						</image>
						<image v-else :src="form.idCardFront" class="card-img" @click="onIdCardFrontClick">
						</image>
						<view class="tip-text">身份证正面</view>
					</view>
					<view class="card-item">
						<image v-if="!form.idCardBack" src="../../static/item_idcard_back.png" class="card-img"
							@click="onIdCardReverseClick">
						</image>
						<image v-else :src="form.idCardBack" class="card-img" @click="onIdCardReverseClick">
						</image>
						<view class="tip-text">身份证反面</view>
					</view>
				</view>
			</view>
			<view class="div-line-type-1" />

			<view class="upload-id-card-view">
				<view class="title">护士资格证</view>
				<view class="card-view">
					<view class="card-item">
						<image v-if="!form.nurseQualificationCertificate" src="../../static/license_card.png" class="card-img"
							@click="onIdNurseQualificationCertificateClick">
						</image>
						<image v-else :src="form.nurseQualificationCertificate" class="card-img"
							@click="onIdNurseQualificationCertificateClick">
						</image>
						<view class="tip-text">护士资格证</view>
					</view>
				</view>
			</view>
			<view class="div-line-type-1" />
			<view class="upload-id-card-view">
				<view class="title">护士执业证</view>
				<view class="card-view">
					<view class="card-item">
						<image v-if="!form.professionalQualificationCertificate" src="../../static/license_card.png"
							class="card-img" @click="onNursePracticeCertificateClick">
						</image>
						<image v-else :src="form.professionalQualificationCertificate" class="card-img"
							@click="onNursePracticeCertificateClick">
						</image>
						<view class="tip-text">护士执业证</view>
					</view>
				</view>
			</view>
			<view class="div-line-type-1" />

			<view class="switch-tab-view">
				<view class="title-view">
					<view class="label">选择技能</view>
					<view class="label-tip">（可多选）</view>
				</view>
				<view class="tab-view">
					<view @click="tabClick(item,index)" :class="currentList.includes(item) ? 'tab-item-selected' : ''"
						v-for="item,index in tabs" class="tab-item">{{item.skillName}}</view>
				</view>
			</view>

		</view>

		<view class="bottom-fixed-view">
			<view class="submit-btn" @click="insertNurseInfo">提交</view>
		</view>

	</view>
</template>

<script>
	import * as upload from '../../common/upload.js'
	import * as patientInfo from '../../common/api/hospitalInfo.js'
	import * as nurseInfo from '../../common/api/nurseInfo.js'
	import * as map from '../../common/map.js'
	import * as skillInfo from '../../common/api/skillInfo.js'
	export default {
		data() {
			return {
				form: {
					pictureName: '', //头像
					nurseName: '',
					hospitalUid: '',
					hospitalName: '',
					sex: '',
					tel: '',
					idNum: '',
					nurseQualificationCertificate: '',
					idCardFront: '',
					idCardBack: '',
					skillName: '', //技能
					skillUid: '',
					positionalTitles: '护士',
					professionalQualificationCertificate: '', //护士执业证
					positionalTitles: '', //职称
					region: '', //所属区域
					sex: '',
					practiseMedicineTime: '', //行医时间
					profiles: '', //简介
					status: '待认证',
				},
				index: 0,
				tabs: [],
				currentList: [],
				canvasWidth: '',
				canvasHeight: '',
				showCanvas: true,
				list: [],
				patientInfoList: [], //医院列表
				positionalTitlesList: ['护士', '护师', '主管护师', '副主任护师', '主任护师'],
				regionTree: [],
				sexList: ['男', '女'],
			}
		},
		onLoad(opt) {
			this.onLoadPatientInfo()
			this.initRegionTree()
			this.getSkillInfoList()
		},
		methods: {
			tabClick(item, index) {
				if (this.currentList.includes(item)) {
					const idx = this.currentList.indexOf(item)
					this.$delete(this.currentList, idx)
					return
				}
				this.currentList.push(item)
			},
			pickerChange(e) {
				this.form.hospitalName = this.patientInfoList[e.target.value].hospitalAme
				this.form.hospitalUid = this.patientInfoList[e.target.value].uid
				this.index = e.target.value
				//console.log(this.title_list[e.target.value].id) //获取id
			},
			onIdCardFrontClick() {
				const self = this
				uni.chooseImage({
					success(res) {
						upload.uploadIdCardFile(res.tempFilePaths[0])
							.then(result => {
								uni.showToast({
									icon: 'success',
									title: '上传成功'
								})
								self.form.idCardFront = result.data.url
								self.form.idNum = result.data.idInfo.num
								self.form.sex = result.data.idInfo.sex
								self.form.nurseName = result.data.idInfo.name
								console.log('res');
							}).catch(error => {
								uni.showToast({
									icon: 'none',
									title: `上传失败${JSON.stringify(error)}`
								})
							})
					}
				})
			},
			onIdCardReverseClick() {
				const self = this
				upload.uploadImage().then(result => {
					uni.showToast({
						icon: 'success',
						title: '上传成功'
					})
					console.log('===>', result);
					self.form.idCardBack = result.data.url
				})
			},
			onIdNurseQualificationCertificateClick() {
				const self = this
				upload.uploadImage().then(result => {
					uni.showToast({
						icon: 'success',
						title: '上传成功'
					})
					console.log('===>', result);
					self.form.nurseQualificationCertificate = result.data.url
				})
			},
			onPictureNameClick() {
				const self = this
				upload.uploadImage().then(result => {
					uni.showToast({
						icon: 'success',
						title: '上传成功'
					})
					console.log('===>', result);
					self.form.pictureName = result.data.url
				})
			},
			onNursePracticeCertificateClick() {
				const self = this
				upload.uploadImage().then(result => {
					uni.showToast({
						icon: 'success',
						title: '上传成功'
					})
					console.log('===>', result);
					self.form.professionalQualificationCertificate = result.data.url
				})
			},
			onLoadPatientInfo() {
				const param = Object.assign({})
				patientInfo.queryByPage(param).then(result => {
					this.patientInfoList = result.data.data.rows || []
					this.handlePatientInfo()
				}).catch(error => {
					console.log(error);
				})
			},
			handlePatientInfo() {
				if (this.patientInfoList.length < 0) {
					return
				}
				this.form.hospitalName = this.patientInfoList[0].hospitalAme
				this.form.hospitalUid = this.patientInfoList[0].uid
			},
			checkForm() {
				const showMsg = (msg = '') => {
					if (msg) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}
				}
				if (!this.form.pictureName) {
					showMsg('头像不能为空')
					return false
				}
				if (!this.form.nurseName) {
					showMsg('姓名不能为空')
					return false
				}
				if (!this.form.tel) {
					showMsg('手机号不能为空')
					return false
				}
				if (!this.form.hospitalUid) {
					showMsg('所属医院不能为空')
					return false
				}
				if (!this.form.region) {
					showMsg('所属区域不能为空')
					return false
				}
				if (!this.form.positionalTitles) {
					showMsg('职称不能为空')
					return false
				}
				if (!this.form.sex) {
					showMsg('性别不能为空')
					return false
				}
				if (!this.form.practiseMedicineTime) {
					showMsg('行医时间不能为空')
					return false
				}
				if (!this.form.profiles) {
					showMsg('简介不能为空')
					return false
				}
				if (!this.form.idNum) {
					showMsg('身份证号不能为空')
					return false
				}
				if (!this.form.idCardFront) {
					showMsg('请上传身份证正面')
					return false
				}
				if (!this.form.idCardBack) {
					showMsg('请上传身份证背面')
					return false
				}
				if (!this.form.nurseQualificationCertificate) {
					showMsg('请上传护士资格证书')
					return false
				}
				if (!this.form.professionalQualificationCertificate) {
					showMsg('请上传护士执业证')
					return false
				}
				if (!this.form.skillName) {
					showMsg('请选择技能')
					return false
				}
				return true
			},
			insertNurseInfo() {
				if (this.currentList.length > 0) {
					this.form.skillName = JSON.stringify(this.currentList.map(e => e.skillName));
					this.form.skillUid = JSON.stringify(this.currentList.map(e => e.uid));
				}
				console.log('-->', JSON.stringify(this.form));
				if (!this.checkForm()) {
					return
				}
				const param = Object.assign({}, this.form)
				nurseInfo.insert(param).then(result => {
					uni.showToast({
						title: '注册成功',
						icon: 'success',
						duration: 2000
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 2000)
				}).catch(error => {
					console.log(error);
				})
			},
			onPositionalTitlesPickerChange(e) {
				console.log(e);
				this.form.positionalTitles = this.positionalTitlesList[e.detail.value]
			},
			initRegionTree() {
				this.regionTree = map.regionTree
			},
			onRegionTreeChange(e) {
				console.log(JSON.stringify(e));
				const value = e.detail.value || []
				const last = value[value.length - 1]
				this.form.region = last.value
			},
			onSexPickerChange(e) {
				this.form.sex = this.sexList[e.detail.value]
			},
			onPractiseMedicineTimePickerChange(e) {
				console.log(JSON.stringify(e));
				this.form.practiseMedicineTime = e.detail.value
			},
			getSkillInfoList() {
				skillInfo.queryByPage({}).then(result => {
					this.tabs = result.data.data.rows || []
				}).catch(error => {
					console.log(error);
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.form-view {
		width: 100%;
		display: flex;
		flex-direction: column;

		.form-row {
			display: flex;
			background: white;
			padding: 0 30rpx;
			height: 120rpx;
			align-items: center;
			justify-content: space-between;

			.label {
				color: #232323;
				font-size: 32rpx;
				font-weight: bold;
			}

			.value {
				display: flex;
				align-items: center;
			}

			input {
				text-align: end;
			}

			.placeholder-class {
				color: rgba(35, 35, 35, 0.4);
				font-size: 32rpx;
			}

			.uni-icons {
				margin-left: 16rpx;
			}

			.hospital-input-view {
				display: flex;
				align-items: center;

				.hospital-input {}
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: solid 1rpx #F8F8F8;
			}



		}

		.div-line-type-1 {
			width: calc(100% - 30rpx);
			background: #F8F8F8;
			height: 2rpx;
			margin-left: 30rpx;
		}

	}

	.upload-id-card-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.card-view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;
		}

		.card-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.card-img {
				width: 330rpx;
				height: 200rpx;
			}

			.tip-text {
				color: rgba(35, 35, 35, 0.8);
				font-size: 24rpx;
				margin-top: 28rpx;
			}
		}
	}

	.switch-tab-view {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 120rpx;

		.title-view {
			display: flex;
			align-items: center;
		}

		.label {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.label-tip {
			color: rgba(35, 35, 35, 0.5);
			font-size: 26rpx;
		}

		.tab-view {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.tab-item {
				background: #F6F6F6;
				padding: 0 20rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
				color: rgba(35, 35, 35, 0.8);
				font-size: 26rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
			}

			.tab-item-selected {
				background: #2EB0D9;
				color: white;
			}
		}
	}


	.bottom-fixed-view {
		width: 100%;
		height: 108rpx;
		position: fixed;
		background: white;
		padding: 14rpx 30rpx;
		box-sizing: border-box;
		bottom: 0;

		.submit-btn {
			width: 100%;
			height: 80rpx;
			background: #2EB0D9;
			border-radius: 40rpx;
			color: white;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.region-selected {
		::v-deep .input-value-border {
			border: none;
		}

		::v-deep .input-arrow {
			display: none;
			width: 0;
			height: 0;
		}

		::v-deep .input-value {
			display: inline;
			height: auto;
		}
	}
</style>